<!--
  - Copyright (c) 2023.
  -
  - 作者：bmy
  - 邮箱：2271608011@qq.com
  - gitee：https://gitee.com/bmycode
  - github：https://github.com/helpcode
  -
  -->

<script lang="ts">
  import Edit from "@/component/edit.svelte";
  import Basis from "@/component/basis.svelte";
  import Storage from "@/component/storage.svelte";
  import Other from "@/component/other.svelte";
  import About from "@/component/about.svelte";

  import { themeConfig } from '@/stores/ThemeStore';
  import ChangeTheme from "@/utils/ChangeTheme";

  let index = 0;
  let menu = [
    { id: 1, type: 'edit', title: '首页', icon: 'json-sucai', component: Edit },
    { id: 2, type: 'basis', title: '基础', icon: 'json-shezhi', component: Basis },
    { id: 3, type: 'storage', title: '存储', icon: 'json-cunchuqia', component: Storage },
    { id: 4, type: 'other', title: '其他', icon: 'json-gengduo1', component: Other },
    { id: 4, type: 'about', title: '关于', icon: 'json-guanyu', component: About },
  ]

  const change = async () => {
    $themeConfig.autoThemeSystem = 0
    $themeConfig.theme = $themeConfig.theme === 'light' ? 'dark' : 'light'
    await ChangeTheme.setThemeRunCode($themeConfig)
  }


</script>

<div class="home">
    <div class="aside" data-tauri-drag-region>
        <div class="aside_top">
            {#each menu as {icon, component, title}, i}
                <i on:click={() => { index = i }}
                   class:active={i === index}
                   class="iconfont {icon}">
                </i>
            {/each}
        </div>
        <i class="iconfont {$themeConfig.theme === 'light' ? 'json-moon' : 'json-taiyang' } aside_bottom"
           on:click={change}>
        </i>
    </div>
    <div class="container">
        <div class="drag" data-tauri-drag-region></div>
        <div class="main">
            {#each menu as {icon, component, title}, i}
                <div class="wrap" style:display={ index === i ? '' : 'none' }
                     style:height="100%">
                    <svelte:component this={component}  />
                </div>
            {/each}
            <div class="left-drag"></div>
        </div>
    </div>
</div>

<style lang="less">
  @import "./home.less";
</style>